.app-stepper {
  text-align: $comp-text-align;
  .stepper-input {
    width: $stepper-width;
    height: $stepper-height;
    margin: 0 0.04rem;
    font-size: $text-font-size;
    color: $stepper-color;
    text-align: center;
    vertical-align: middle;
    background-color: $stepper-background;
    border: 0;
    &:focus {
      outline: none;
    }
  }
  .stepper-minus,
  .stepper-plus {
    position: relative;
    width: $stepper-height;
    height: $stepper-height;
    color: $stepper-color;
    vertical-align: middle;
    cursor: pointer;
    background-color: $stepper-background;
    border: 0;
  }
  .stepper--disabled {
    color: $stepper-disabled-color;
    pointer-events: none;
    cursor: not-allowed;
    background-color: $stepper-disabled-background;
  }
  .stepper--readonly {
    display: none;
  }
  .stepper-minus::before,
  .stepper-minus::after,
  .stepper-plus::before,
  .stepper-plus::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    background-color: $stepper-color;
    transform: translate(-50%, -50%);
  }
  .stepper-minus {
    &::after {
      width: 50%;
      height: 0.02rem;
    }
  }
  .stepper-plus {
    &::before {
      width: 0.02rem;
      height: 50%;
    }
    &::after {
      width: 50%;
      height: 0.02rem;
    }
  }
}
